<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="30%">
    <dynForm
      ref="dataForm"
      :info-form="searchForm"
      :search-tags="searchTags"
      :rules="rules"
    >
      <div class="btn-add">
        <span>包含元素</span>
        <el-button
          type="success"

          @click="addElement"
        >{{ $t('add') }}</el-button>
      </div>
      <dynTable
        ref="dynTable"
        :loading="false"
        :table-data="searchForm.elementsList"
        :table-columns="tableColumns"
      />
    </dynForm>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"

      >{{ $t('save') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { doAdd, doUpdate, getInfo } from '@/api/treeDefintion/setupTree'
import { elementList } from '@/api/treeDefintion/setupElement'
export default {
  name: 'SetupTreeForm',
  data() {
    return {
      dialogVisible: false,
      title: '',
      searchForm: {
        elementsList: []
      },
      selectElementList: [],
      searchTags: [
        { label: this.$t('dataName'), prop: 'name', tag: 'DynInput' },
        { label: this.$t('remark'), prop: 'remark', tag: 'DynTextarea', row: 2 }
      ],
      rules: {
        name: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('dataName')}`, trigger: 'blur' }]
      },
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ _scope.$index + 1 }</span>
          )
        } },
        { prop: 'id', label: this.$t('element'), templete: (_scope) => {
          return (
            <el-select clearable v-model={_scope.row.id} size='small'>
              {this.selectElementList.map(item => {
                return (
                  <el-option
                    disabled={this.isDisable.includes(item.id)}
                    key={item.id}
                    label={item.name}
                    value={item.id}>
                  </el-option>
                )
              })}
            </el-select>
          )
        } },
        { prop: '', label: this.$t('delete'), width: '80px', templete: (_scope) => {
          return (
            <el-button type='text' size='small' on-click={() => this.handleDelete(_scope)}>{this.$t('delete')}</el-button>
          )
        } }
      ]
    }
  },
  computed: {
    isDisable() {
      return this.searchForm.elementsList.filter(item => item !== null && item !== '').map(ele => ele.id)
    }
  },
  methods: {
    addElement() {
      !this.selectElementList.length && elementList().then(res => {
        this.selectElementList = res.data
      })
      this.searchForm.elementsList.push({})
    },
    doSave() {
      if (Array.isArray(this.searchForm.elementsList)) {
        // 判断元素非空重新赋值,因为不能打乱index顺序
        const tempArr = this.searchForm.elementsList.filter(ele => ele.id)
        tempArr.forEach((ele, index) => {
          ele['levelId'] = index + 1
        })
        this.searchForm.elementsList = tempArr
      }
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          if (this.searchForm.id) {
            doUpdate(this.$clearNull(this.searchForm)).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          } else {
            doAdd(this.$clearNull(this.searchForm)).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          }
        }
      })
    },
    async handleOpen(row) {
      if (row && row.id) {
        const res = await getInfo({ id: row.id })
        this.searchForm = res.data
        // this.searchForm.elementsList = Array.isArray(this.searchForm.elementsList) ? this.searchForm.elementsList : []
        this.title = this.$t('modify')
        const elementData = await elementList()
        this.selectElementList = elementData.data
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].$refs['dynForm'].clearValidate()
      })
    },
    handleDelete(row) {
      this.searchForm.elementsList.splice(row.$index, 1)
    },
    handleUpdate() {
      this.$emit('initList')
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
.btn-add {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}
::v-deep .el-form {
    .el-form-item {
        width: 100%;
        // 感觉有点问题
        .el-form-item__content{
            width: 60%;
        }
    }
}
</style>
